﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="UserControl_Default"
    SmartNavigation="true" %>

<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    <link href="../css/font.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
        language="javascript" charset="gb2312"></script>

    <style type="text/css">
        .tab
        {
            background-color: #FAFAFA;
            margin: 2px 5px;
            padding: 2px 4px;
        }
        .tab p span
        {
            background-color: #EFEFEF;
            border: 1px solid #CCCCCC;
            cursor: pointer;
            margin-right: 6px;
            padding: 2px 5px;
        }
        .tab p span.current
        {
            background-color: #FAFAFA;
            border-bottom-color: #fafafa;
        }
        .tab p
        {
            border-bottom: 1px solid #CCCCCC;
            font-weight: bold;
            padding: 0 10px 2px;
        }
        .tab li
        {
            border-bottom: 1px dotted #CCCCCC;
            padding-bottom: 2px;
            margin: 1px 0;
        }
        .tab .mhot, .tab.allhot
        {
            display: none;
        }
        .tab ul
        {
        	margin-left:1px;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            //Tab
                        $(".tab span:first").addClass("current"); //为第一个SPAN添加当前效果样式
                        $(".tab ul:not(:first)").hide(); //隐藏其它的UL
                        $(".tab span").click(function() {
                            $(".tab span").removeClass("current"); //去掉所有SPAN的样式
                            $(this).addClass("current");
                            $(".tab ul").hide();
                            $("." + $(this).attr("id")).fadeIn('normal');
                        });
            //TreeView点击

            var o = $('a[href]');
            o.each(function() {
                var oo = $(this);
                oo.click(function() {
                    $('#s1').empty();
                    $.ajax({
                        type: "GET",
                        url: oo.attr('href'),
                        success: function(msg) {
                            $('#s1').append(msg);
                        }
                    });
                    return false;
                });
            });

            //点击查询按钮
            $('#btnSearch').click(function() {
                $('#s1').empty();
                $.ajax({
                    type: "GET",
                    url: 'GetContactsHandler.ashx?SearchType=' + $('#ddlSearchType option:selected').val() + '&Condition=' + $.trim($('#txtCondition').val()),
                    success: function(msg) {
                        if ($.trim(msg) != '') {
                            $('#s1').append(msg);
                        }
                    }
                });
            });


            //左边双击
            $("#s1").dblclick(function() {
                var alloptions = $("#s1 option");
                var so = $("#s1 option:selected");

                so.get(so.length - 1).index == alloptions.length - 1 ? so.prev().attr("selected", true) : so.next().attr("selected", true);
                if ($("#s2").val() == null) {
                    $("#s2").append(so);
                }
                if ($("#s2").val() != null) {
                    $("#s2 option").each(function() {
                        var o = $(this);
                        if (o.val() == so.val()) {

                        }
                        else {
                            $("#s2").append(so);
                        }
                    });
                }
            });
            //右边双击
            $("#s2").dblclick(function() {
                var alloptions = $("#s2 option");
                var so = $("#s2 option:selected");

                so.get(so.length - 1).index == alloptions.length - 1 ? so.prev().attr("selected", true) : so.next().attr("selected", true);
                if ($("#s1").val() == null) {
                    $("#s1").append(so);
                }
                if ($("#s1").val() != null) {
                    $("#s1 option").each(function() {
                        var o = $(this);
                        if (o.val() == so.val()) {
                            s3.append(so);
                        }
                        else {
                            $("#s1").append(so);
                        }
                    });
                }
            });
            //选中右移
            $("#add").click(function() {
                var alloptions = $("#s1 option");
                if ($("#s1 option").val() != null) {
                    var so = $("#s1 option:selected");
                    if (so.length > 0) {
                        so.get(so.length - 1).index == alloptions.length - 1 ? so.prev().attr("selected", true) : so.next().attr("selected", true);
                        if ($('#s2').val() == null) {
                            $("#s2").append(so);
                        }
                        if ($('#s2').val() != null) {
                            var righto = $("#s2 option");
                            var flag = false;
                            righto.each(function() {
                                if ($(this).val() == so.val()) {
                                    flag = true;
                                    return false;
                                }
                            });
                            if (flag == false) {
                                $("#s2").append(so);
                            }
                        }
                    }

                }
            });
            //选中左移
            $("#remove").click(function() {
                var alloptions = $("#s2 option");
                if (alloptions.val() != null) {
                    var so = $("#s2 option:selected");
                    if (so.length > 0) {
                        so.get(so.length - 1).index == alloptions.length - 1 ? so.prev().attr("selected", true) : so.next().attr("selected", true);
                        if ($('#s1').val() == null) {
                            $("#s1").append(so);
                        }
                        if ($('#s1').val() != null) {
                            var lefto = $('#s1 option');
                            var flag = false;
                            lefto.each(function() {
                                if ($(this).val() == so.val()) {
                                    flag = true;
                                    //$('#s3').append(so);
                                    return false;
                                }
                            });
                            if (flag == false) {
                                $("#s1").append(so);
                            }
                        }
                    }
                }
            });
            //全部右移
            $("#addall").click(function() {
//                if ($('#s1').val() != null) {
//                    $("#s1 option").get(0).attr('selected');
//                }
                //$("#s2").append($("#s1 option").attr("selected", true));
                if ($("#s1").val() != null) {
                    //$("#s1").get(0).selectedIndex = 0;
                    if ($("#s2").val() == null) {
                        $("#s2").append($("#s1 option"));
                    }
                    if ($("#s2").val() != null) {
                        var flag = false;
                        $("#s1 option").each(function() {
                            var s1o = $(this);
                            $("#s2 option").each(function() {
                                s2o = $(this);
                                if (s1o.val() == s2o.val()) {
                                    flag = true;
                                    return false;
                                }
                            });
                            if (flag == false) {
                                $("#s2").append(s1o);
                            }
                        });
                    }
                }
            });
            //全部左移
            $("#removeall").click(function() {
                if ($("#s2").val() != null) {
                    if ($("#s1").val() == null) {
                        $("#s1").append($("#s2 option"));
                    }
                    if ($("#s1").val() != null) {
                        var flag = false;
                        $("#s2 option").each(function() {
                            var s2o = $(this);
                            $("#s1 option").each(function() {
                                s1o = $(this);
                                if (s1o.val() == s2o.val()) {
                                    flag = true;
                                    $("#s3").append(s2o);
                                    return false;
                                }
                            });
                            if (flag == false) {
                                $("#s1").append(s2o);
                            }
                        });
                    }
                }
            });
        });

    </script>

</head>
<body style="font-size: 12px;">
    <form id="form1" runat="server">
    <div>
        <div>
            <table>
                <tr>
                    <td rowspan="2" valign="top">
                        <table style="background-color: #ffffff" id="tableTreeView">
                            <tr>
                                <td valign="top">
                                    <div class="tab">
                                        <p>
                                            <span id="tab1">组织结构</span><span id="tab2">自定义组</span>
                                        </p>
                                        <ul class="tab1">
                                            <%--<asp:TreeView ID="tvContactsGroup" runat="server" ImageSet="Arrows" ShowLines="True">
                                                <ParentNodeStyle Font-Bold="False" />
                                                <HoverNodeStyle Font-Underline="False" ForeColor="#5555DD" />
                                                <SelectedNodeStyle Font-Underline="False" HorizontalPadding="0px" VerticalPadding="0px"
                                                    ForeColor="#5555DD" Font-Bold="true" />
                                                <RootNodeStyle ForeColor="Blue" />
                                                <NodeStyle Font-Names="Tahoma" Font-Size="10pt" ForeColor="Black" HorizontalPadding="5px"
                                                    NodeSpacing="0px" VerticalPadding="0px" />
                                            </asp:TreeView>--%>
                                            <asp:TreeView ID="tvContactsGroup" runat="server">
                                            </asp:TreeView>
                                        </ul>
                                        <ul class="tab2">
                                            自定义组
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td valign="top">
                        <!--查询框-->
                        <table>
                            <tr>
                                <td>
                                    <span style="color: White;">查询选项：</span>
                                    <asp:DropDownList ID="ddlSearchType" runat="server">
                                        <asp:ListItem Selected="True" Value="CT_Name">姓名</asp:ListItem>
                                        <asp:ListItem Value="CT_Mobile">手机号码</asp:ListItem>
                                    </asp:DropDownList>
                                    <asp:TextBox ID="txtCondition" runat="server" Style="border: 1px solid #ffffff; width: 120px"
                                        MaxLength="11"></asp:TextBox>
                                    <input type="button" id="btnSearch" runat="server" title="查询" style="width: 61px;
                                        height: 21px; border: 0px; background: url(../Images/3G/button_search.gif) no-repeat;" />
                                </td>
                            </tr>
                        </table>
                        <table>
                            <tr>
                                <td>
                                    <div id="divData">
                                        <table>
                                            <tr>
                                                <td style="vertical-align: top">
                                                    <span style="color: White">联系人</span>
                                                    <br />
                                                    <asp:ListBox ID="s1" runat="server" Height="250px" Width="175px" SelectionMode="Multiple">
                                                    </asp:ListBox>
                                                </td>
                                                <td style="vertical-align: middle">
                                                    <input type="button" id="addall" runat="server" value=">>" title="全部右移" />
                                                    <br />
                                                    <input type="Button" id="add" runat="server" value=" > " title="右移" />
                                                    <br />
                                                    <input type="Button" id="remove" runat="server" value=" < " title="左移" />
                                                    <br />
                                                    <input type="Button" id="removeall" runat="server" value="<<" title="全部左移" />
                                                </td>
                                                <td>
                                                    <span style="color: White">已选择联系人</span>
                                                    <br />
                                                    <asp:ListBox ID="s2" runat="server" Height="250px" Width="175px" SelectionMode="Multiple">
                                                    </asp:ListBox>
                                                    <select id="s3" style="display: none" />
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <input type="hidden" id="hihSelected" value="" runat="server" />
    </form>
</body>
</html>
